<template>
    <div class="content-wrapper">
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
            <!--<el-breadcrumb-item>{{breadName}}</el-breadcrumb-item>-->
        </el-breadcrumb>
        <div class="">
            <match-info :data="detail.info"/>
            <div class="contentMiddle">
                <el-menu index="" :default-active="active" mode="horizontal" unique-opened router>
                    <el-menu-item :index="'/history/detail/index?id='+$route.query.id">赛事详情</el-menu-item>
                    <el-menu-item :index="'/history/detail/rule?id='+$route.query.id">赛事章程</el-menu-item>
                    <el-menu-item :index="'/history/detail/notice?id='+$route.query.id">赛事公告</el-menu-item>
                    <el-menu-item :index="'/history/detail/manage?id='+$route.query.id">赛程管理</el-menu-item>
                    <el-menu-item :index="'/history/detail/player?id='+$route.query.id">参赛者管理</el-menu-item>
                </el-menu>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
            <!--{{global}}-->
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import MatchInfo from '../components/MatchInfo'
  export default{
    components: {
      MatchInfo
    },
    computed: {
      ...mapGetters({
        global: 'global',
        detail: 'detail'
      }),
      active(){
        if (this.$route.path.indexOf('index') > -1) {// 详情
          return '/history/detail/index?id=' + this.$route.query.id
        }
        if (this.$route.path.indexOf('rule') > -1) {// 赛程编辑
          return '/history/detail/rule?id=' + this.$route.query.id
        }
        if (this.$route.path.indexOf('notice') > -1) {// 赛事公告
          return '/history/detail/notice?id=' + this.$route.query.id
        }
        if (this.$route.path.indexOf('manage') > -1) {// 赛程管理
          return '/history/detail/manage?id=' + this.$route.query.id
        }
        if (this.$route.path.indexOf('player') > -1) {// 参赛者管理
          return '/history/detail/player?id=' + this.$route.query.id
        }
        return this.$route.fullPath
      }
    }
  }
</script>

<style scoped>
    .content-wrapper {
        background: #ebf0f5;
    }

    .contentMiddle {
        margin-top: 20px;
        background: #fff;
    }
</style>
